<template>
  <div>
    <div style="display: flex;margin-bottom: 10px">
      <el-input
        placeholder="请输入社团名称"
        v-model="clubName"
        style="width: 200px;margin-left: 10px"
        clearable>
      </el-input>
      <el-button @click="getClubManagerList" type="primary" style="margin-left: 10px" size="medium">查询</el-button>
    </div>

    <el-table
      :data="page.records"
      border
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="社团描述：">
              <span>{{ props.row.clubDescribe }}</span>
            </el-form-item>
<!--            <el-form-item label="社团通知：">-->
<!--              <span>{{ props.row.clubNotice }}</span>-->
<!--            </el-form-item>-->
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        fixed
        prop="id"
        label="ID"
        width="60">
      </el-table-column>
      <el-table-column
        prop="name"
        label="社团名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="clubIntroduce"
        label="社团介绍"
        width="300">
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="clubDescribe"-->
<!--        label="社团描述"-->
<!--        width="250">-->
<!--      </el-table-column>-->
      <el-table-column
        prop="clubNotice"
        label="社团通知"
        width="250">
      </el-table-column>
      <el-table-column
        label="创建时间"
        width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ getDateTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="社团状态"
        width="150">
        <template slot-scope="scope">
          <div class="name-wrapper">
            <el-tag size="medium" v-if="scope.row.clubStatus==0">待审核</el-tag>
            <el-tag type="success" size="medium" v-if="scope.row.clubStatus==1">审核通过</el-tag>
            <el-tag type="warning" size="medium" v-if="scope.row.clubStatus==2">不通过</el-tag>
            <el-tag type="danger" size="medium" v-if="scope.row.clubStatus==3">禁用中</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
            <el-submenu index="2">
              <template slot="title">管理操作</template>
              <el-menu-item index="2-1">
                <el-button @click="jump2(scope.row.id)" type="text" size="small">活动管理</el-button>
              </el-menu-item>
              <el-menu-item index="2-2">
                <el-button @click="jump1(scope.row.id)" type="text" size="small">人员审核</el-button>
              </el-menu-item>
              <el-menu-item index="2-3">
                <el-button @click="jumpArticle(scope.row.id)" type="text" size="small">文章管理</el-button>
              </el-menu-item>
              <el-menu-item index="2-4">
                <el-button @click="jumpBudget(scope.row.id)" type="text" size="small">经费管理</el-button>              </el-menu-item>
              <el-menu-item index="2-5">
                <el-button @click="updateClubInfo(scope.row.id)" type="text" size="small">修改信息</el-button>
              </el-menu-item>
            </el-submenu>
          </el-menu>
<!--          &lt;!&ndash;          <el-button @click="jump(scope.row.id)" type="text" size="small">增加活动</el-button>&ndash;&gt;-->
<!--          <el-button @click="jump2(scope.row.id)" type="text" size="small">活动管理</el-button>-->
<!--          <el-button @click="jump1(scope.row.id)" type="text" size="small">人员审核</el-button>-->
<!--          &lt;!&ndash;          <el-button @click="getClubMember(scope.row.id)" type="text" size="small">查看成员</el-button>&ndash;&gt;-->
<!--          <el-button @click="jumpArticle(scope.row.id)" type="text" size="small">文章管理</el-button>-->
<!--          <el-button @click="jumpBudget(scope.row.id)" type="text" size="small">经费管理</el-button>-->
<!--          <el-button @click="updateClubInfo(scope.row.id)" type="text" size="small">修改信息</el-button>-->

        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="changeClubList"
      :page-count="page.pages"
    >
    </el-pagination>
    <el-dialog
      title="社团成员"
      :visible.sync="dialogVisible"
      width="25%"
      class="dialog1"
      center>
      <el-table :data="member">
        <el-table-column property="name" label="姓名" width="100"></el-table-column>
        <el-table-column property="sex" label="性别" width="100"></el-table-column>
        <el-table-column property="grade" label="年级" width="100"></el-table-column>
        <el-table-column property="phone" label="电话" width="100"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getClubManagerPageList, getClubMember, getMyClubListPageList} from "../../../api/club";
import {getDateTime1} from "../../../utils/dateTimeUtil";
import {getActivityMember} from "../../../api/activity";

export default {
  name: "ClubManage",
  data() {
    return {
      activeIndex: '1',
      page: {
        total: 2,
        current: 1,
        records: [],
        pages: 2,
      },
      clubName: null,
      dialogVisible: false,
      member: [],
    }
  },
  created() {
    this.getClubManagerList();
  },
  methods: {
    getClubManagerList() {
      getClubManagerPageList({
        currentPage: this.page.current,
        clubName: this.clubName,
      }).then(res => {
        this.page = res.data;
        if (!(res.code == 200)) {
          this.$message({
            type: 'error',
            message: res.message
          });
        }
      })
    },
    changeClubList(val) {
      console.log(val)
      this.page.current = val;
      this.getClubList();
    },
    getDateTime(val) {
      return getDateTime1(val);
    },
    jump(clubId) {
      this.$router.push({path: `addActivity/${clubId}`})
    },
    jump1(clubId) {
      this.$router.push({path: `memberManage/${clubId}`})
    },
    jump2(clubId) {
      this.$router.push({path: `activityManage/${clubId}`})
    },
    jumpArticle(clubId) {
      this.$router.push({path: `articleList/${clubId}`})
    },
    jumpBudget(clubId) {
      this.$router.push({path: `budgetList/${clubId}`})
    },
    updateClubInfo(clubId) {
      // this.$router.push({path: `activityManage/${clubId}`})
      this.$router.push({
        path: `/managerHome/clubInfoUpdate`,
        name: 'clubInfoUpdate',
        params: {
          clubId: clubId
        }
      })
    },
    getClubMember(clubId) {
      getClubMember({
        clubId: clubId,
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.message
          });
          this.dialogVisible = true
          this.member = res.data
        }
      })
    }
  }
}
</script>

<style scoped>
.dialog1 {
  overflow-y: auto;
  height: calc(100vh - 140px);
}
.demo-table-expand {
  font-size: 0;
  text-decoration: none;
  margin: 20px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
